<template>
  <div class="headBar" :style="{'background':themeColor}" :class="collapse?'position-collapse-left':'position-left'">
    <!--导航收缩-->
    <span class="hamburg">
       <el-menu :background-color="themeColor" text-color="#fff" :active-text-color="themeColor" mode="horizontal">
         <el-menu-item index="1" @click="onCollapse">
           <hamburger :isActive="collapse"></hamburger>
         </el-menu-item>
       </el-menu>
     </span>
    <!--工具栏-->
    <span class="toolbar">
      <el-menu class="myMenu" :background-color="themeColor" text-color="#14889A" :active-text-color="themeColor"
               mode="horizontal">
        <!--主题切换-->
        <el-menu-item index="1">
          <theme-picker class="theme-picker" :default="themeColor" @onThemeChange="onThemeChange"></theme-picker>
        </el-menu-item>
        <!--语言切换-->
         <el-menu-item index="2" v-popover:popover-lang>
          <li style="color:#fff;" class="fa fa-language fa-lg"></li>
          <el-popover ref="popover-lang" placement="bottom-start" trigger="click" v-model="langVisible">
            <div class="lang-item" @click="changeLanguage('zh_cn')">简体中文</div>
            <div class="lang-item" @click="changeLanguage('en_us')">English</div>
          </el-popover>
         </el-menu-item>
        <!--用户信息-->
       <el-menu-item index="3" v-popover:popover-personal>
          <span class="user-info"><img :src="user.avatar"/>{{user.name}}</span>
          <el-popover ref="popover-personal" placement="bottom-end" trigger="click" :visible-arrow="false">
            <personal-panel :user="user"></personal-panel>
          </el-popover>
        </el-menu-item>
      </el-menu>
    </span>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import MenuTree from "../components/MenuTree"
  import Hamburger from "../components/Hamburger"
  import ThemePicker from "../components/ThemePicker"
  import PersonalPanel from "./core/PersonalPanel"

  /*头部区域*/
  export default {
    name: "HomeBar",
    data() {
      return {
        user: {
          name: 'admin',
          avatar: '@/assets/user.png',
          role: '超级管理员',
          registerInfo: '注册时间：2022-01-10'
        },
        langVisible: false,
        activeIndex: '1'
      }
    },
    components: {
      MenuTree,
      Hamburger,
      ThemePicker,
      PersonalPanel
    },
    methods: {
      selectNavBar(key, keyPath) {
        console.log(key, keyPath)
      },
      // 折叠导航栏
      onCollapse() {
        this.$store.commit('onCollapse')
      },
      //主题切换
      onThemeChange(themeColor) {
        this.$store.commit('setThemeColor', themeColor);
      },
      //语言切换
      changeLanguage(lang) {
        lang = lang === '' ? 'zh_cn' : lang;
        this.$i18n.locale = lang;
        this.langVisible = false;
      }
    },
    mounted() {
      let user = localStorage.getItem('account');
      if (user) {
        this.user.name = user;
        this.user.avatar = require("@/assets/user.png");
      }
    },
    computed: {
      ...mapState({
        themeColor: state => state.app.themeColor,
        collapse: state => state.app.collapse
      })
    }

  }
</script>

<style scoped>
  .headBar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1030;
    height: 60px;
    line-height: 60px;
    border-color: rgba(180, 190, 190, 0.8);
    border-left-width: 1px;
    border-left-style: solid;
  }

  .hamburg, .navbar {
    float: left;
  }

  .toolbar {
    float: right;
  }

  .user-info {
    font-size: 20px;
    color: #fff;
    cursor: pointer;
  }

  span img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin: 10px 0 10px 10px;
    float: right;
  }

  .position-left {
    left: 200px;
  }

  .position-collapse-left {
    left: 65px;
  }
</style>
